Bug 148023

Summary: Wrong font size on custom CSS class which changes background colour on iPhone
Product: WebKit Reporter: Moridin <wojtek>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ap, bfulgham, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: iPhone / iPad   
OS: iOS 8.2   
Attachments:
Description Flags
CSS Bug on Mobile Safari none

Description Moridin 2015-08-14 01:08:28 PDT 
Created attachment 258996 [details]
CSS Bug on Mobile Safari

Example page: http://www.makoweabc.pl/2015/08/jak-dzialaja-przyciski-w-gornym-lewym-rogu-okien-w-os-x-10-10-yosemite-i-10-11-el-capitan/

Bug pertains to paragraph below <h4> "Uaktualnienie" and above <h4> "/Uaktualnienie". CSS class is "notatka-grey".

Description:
I use a CSS class which changes a selected paragraph's background to grey using "notatka-grey" or red using "notatka". These paragraphs appear to be fine in every browser apart from mobile Safari on iPhone. It has persisted since iOS 6 if I recall correctly.

Since my site has a responsive design, it uses a different font size on iPhones and other smartphones. Mobile Safari appears not to honour this setting when using this class. All is well under mobile Chrome on Android 4.x-5.x and when previewing the site in "iPhone mode" under desktop Safari's responsive design view (10.8-10.11) and other major browsers like Firefox etc.

Other examples:
1. http://www.makoweabc.pl/2015/07/tweetbot-dla-os-x-przeceniony-oraz-moje-przemyslania-na-jego-temat/

2. http://www.makoweabc.pl/2015/07/jakim-jestes-makiem-wydanie-1-4-juz-dostepne/

3. http://www.makoweabc.pl/lista-wszystkich-modeli-iphonea-ipoda-touch-i-ipada/

4. http://www.makoweabc.pl/2014/07/recenzja-macbook-air-11-6-mid-2013-pierwsze-urodziny/

Screenshots:
1. Mobile Chrome on Android: https://www.dropbox.com/s/42x8jliq0zsmog2/CSS%20Bug%20Mobile%20Chrome%20on%20Android.png?dl=0
2. Mobile Safari on iPhone: https://www.dropbox.com/s/urrohpwncerheud/CSS%20Bug%20Mobile%20Safari.png?dl=0
3. Desktop Safari Reponsive design mode: https://www.dropbox.com/s/9vbotpxstut8mwx/CSS%20Bug%20Safari%209%20on%20El%20Cap.png?dl=0
Comment 1 Alexey Proskuryakov 2015-08-15 13:16:40 PDT 
Thank you for the bug report?

Would you be wiling to reduce the problem to a smaller test case than the whole web site?
Comment 2 Moridin 2015-08-16 04:02:00 PDT 
What do you suggest?
Comment 3 Radar WebKit Bug Importer 2022-07-14 14:33:58 PDT 
<rdar://problem/97035750>