Repository navigation
FlowType makes elements that have a padding set with em values jump on resize & reload #57
Description
Check this fiddle please and possibly advise how this could be fixed.
- 1st div has a padding value set with em.
- 2nd div has a padding value set with px.
- 3rd div has a padding value set with percentage.
Run the fiddle, resize (e.g. when user changes device orientation from portrait to landscape) the viewport and then run the fiddle again (what translates to reloading the page after resizing it).
You can see the 1st div content readjusting font-size and line-height. This creates a quite unpleasant "jump" in the overall page layout.
Ideally regardless of resizing and then reloading the viewport, the font-size and line-height should be respected or set with regards to any values set in em for that element.
Activity
christhebishop commentedon Nov 28, 2016
@monolux Hello, I am the new supporter at Simple Focus for this project and wanted to reach out to you and see if you'd ever found a solution to this?
I looked at your fiddle and, and while I'm not 100% certain of the cause, I believe it may have to do with the fact that FlowType is using the jQuery .width() to get the elements width (see line 30 of the flowtype.js). According to the jQuery documentation, ".width() will always return the content width, regardless of the value of the CSS box-sizing property".
Your use of em's for padding, which is subject to change based on your elements font-size, coupled with FlowType's math using .width() to get your elements content width (instead of the overall width of the element including padding), is what I believe is causing FlowType to readjust that first elements font-size on reload.
If I'm understanding your problem correctly, I believe you can fix it by changing the .width() in line 30 of your flowtype.js file to use .outerWidth(), which accounts for padding and border. I've updated your fiddle accordingly.
Let me know if that helps. Thanks!
christhebishop commentedon Dec 5, 2016
@monolux You're very welcome - I'm glad the solution appears to have fixed your initial issue! Just let me know about the other issue if this solution happens to not be applicable for it. I'm happy to help.