Conversation
|
|
|
I resolved the merge conflicts with |
| min-width: 100%; | ||
|
|
||
| font-size: 34px; | ||
| font-size: dynamic-font-min(1, 34px); |
There was a problem hiding this comment.
This is going to set a minimum font size. Did you mean to use dynamic-font-max instead?
| position: relative; | ||
|
|
||
| font-size: 13px; | ||
| font-size: dynamic-font-min(1, 13px); |
There was a problem hiding this comment.
This is going to set a minimum font size. Did you mean to use dynamic-font-max instead?
| transform: translateZ(0); | ||
|
|
||
| font-size: 17px; | ||
| font-size: dynamic-font-min(1, 17px); |
There was a problem hiding this comment.
This is going to set a minimum font size. Did you mean to use dynamic-font-max instead?
| transform: translateZ(0); | ||
|
|
||
| font-size: 17px; | ||
| font-size: dynamic-font-max(17px, 1.2); |
There was a problem hiding this comment.
I used the Contacts app as a reference.
Default
AX5
| min-width: 100%; | ||
|
|
||
| font-size: 34px; | ||
| font-size: dynamic-font-max(34px, 1.8); |
There was a problem hiding this comment.
I used the Contacts app as a reference.
Default
AX5
| position: relative; | ||
|
|
||
| font-size: 13px; | ||
| font-size: dynamic-font-max(13px, 1.8); |
There was a problem hiding this comment.
I used the Contacts app as a reference.
Default
AX5
| position: relative; | ||
|
|
||
| font-size: 13px; | ||
| font-size: dynamic-font-max(13px, 1.8); |
There was a problem hiding this comment.
Weirdly, the small sized title on native has a larger font size when on ax5.
3 participants
Issue number: internal
What is the current behavior?
The title component does not support dynamic type.
What is the new behavior?
size="large") are no longer rendered withposition="absolute"position="absolute"is used to center aligned the text. However, a title component withsize="large"is always left aligned and doesn't need to be set withabsolute.size="large"is no longer set withposition="absolute". This causes the component to lower itself within the box instead of being able to render at the very left top corner.A few notes on the screenshot diffs:
1px change for Firefox diffs
The accordion and header condense screenshots have a diff for Firefox only. This is due to a rendering quirk in Gecko, the engine that powers Firefox.
Previously,
ion-titlewas positioned absolutely, so it was taking on the dimensions of the parent element. Now that it is positioned statically,ion-titlewill use the size of its contents to calculate the dimensions. In this case, the height will be determined by the height of the title text. Chrome and Safari render the text as 40px tall, but Firefox renders it as 41px tall.Title characters dimensions change
We reduced the padding on the start/end and increased the padding on the top/bottom which is going to cause the title to change dimensions, so these screenshots are correct. Because the dimensions of the title itself are changing too with the absolute --> static change the overall size of the toolbar never actually changes.
Note that we are also moving padding from the toolbar to the title itself now that it is no longer absolutely positioned.
Does this introduce a breaking change?
Other information
N/A