Text rendering problem on landing pages
iPhone 5 and iPhone 6 phones are not rendering landing pages on the asc website that have text on them correctly.
These are the pages that are affected: http://artsandsciences.osu.edu/academics http://artsandsciences.osu.edu/news-events http://artsandsciences.osu.edu/research http://artsandsciences.osu.edu/arts http://artsandsciences.osu.edu/alumni http://artsandsciences.osu.edu/giving
The About page is not affected but that is because it does not have text on it. http://artsandsciences.osu.edu/about/welcome
There is some custom CSS on those pages. We could test to see if taking that out will solve anything.
If you rotate your phone horizontally and then go back to portrait then it renders it correctly
Theories: resolution issue: This should be fine because our breakpoint is 760 and the resolution of an iPhone 6 is 740. iOS9 issue: maybe. It came out Sept 16 and we’ve just had this problem for a short period of time. Safari issue: maybe. Chrome uses safari in the background and is also showing the problem.
Current information: It looks like the styles are not getting set properly on the initial page load.
Resources: https://developer.chrome.com/multidevice/ios/overview This is what renders the content: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html
This might help: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html#//apple_ref/occ/instp/UIWebView/scalesPageToFit
and this: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002051
Comments:
- This is happening due to some sort of interaction between the javascript and CSS of the top carousels on these pages.
The screenshots below show what is happening on the initial page load with javascript turned off and then on. (Dustin Perzanowski - Oct 9, 2015)
- with javascript turned on, the mobile breakpoint CSS is not being used when the content is reinserted in to the page to create the carousel. Rotating the screen forces the screen to be redrawn which will force the CSS rules to be reapplied to everything. (Dustin Perzanowski - Oct 9, 2015)
- I'm going to close this issue and see if we can fix this through changing how the rotor images behave on all landing pages. (Eva Dale - Oct 14, 2015)