Bug 148023 - Wrong font size on custom CSS class which changes background colour on iPhone
Summary: Wrong font size on custom CSS class which changes background colour on iPhone
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: iPhone / iPad iOS 8.2
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-08-14 01:08 PDT by Moridin
Modified: 2022-07-14 14:33 PDT (History)
3 users (show)

See Also:


Attachments
CSS Bug on Mobile Safari (256.09 KB, image/png)
2015-08-14 01:08 PDT, Moridin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>