<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Wrong font size on custom CSS class which changes background colour on iPhone"
href="https://bugs.webkit.org/show_bug.cgi?id=148023">148023</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Wrong font size on custom CSS class which changes background colour on iPhone
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 8.2
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>wojtek@pietrusiewi.cz
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=258996" name="attach_258996" title="CSS Bug on Mobile Safari">attachment 258996</a> <a href="attachment.cgi?id=258996&action=edit" title="CSS Bug on Mobile Safari">[details]</a></span>
CSS Bug on Mobile Safari
Example page: <a href="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/">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/</a>
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. <a href="http://www.makoweabc.pl/2015/07/tweetbot-dla-os-x-przeceniony-oraz-moje-przemyslania-na-jego-temat/">http://www.makoweabc.pl/2015/07/tweetbot-dla-os-x-przeceniony-oraz-moje-przemyslania-na-jego-temat/</a>
2. <a href="http://www.makoweabc.pl/2015/07/jakim-jestes-makiem-wydanie-1-4-juz-dostepne/">http://www.makoweabc.pl/2015/07/jakim-jestes-makiem-wydanie-1-4-juz-dostepne/</a>
3. <a href="http://www.makoweabc.pl/lista-wszystkich-modeli-iphonea-ipoda-touch-i-ipada/">http://www.makoweabc.pl/lista-wszystkich-modeli-iphonea-ipoda-touch-i-ipada/</a>
4. <a href="http://www.makoweabc.pl/2014/07/recenzja-macbook-air-11-6-mid-2013-pierwsze-urodziny/">http://www.makoweabc.pl/2014/07/recenzja-macbook-air-11-6-mid-2013-pierwsze-urodziny/</a>
Screenshots:
1. Mobile Chrome on Android: <a href="https://www.dropbox.com/s/42x8jliq0zsmog2/CSS%20Bug%20Mobile%20Chrome%20on%20Android.png?dl=0">https://www.dropbox.com/s/42x8jliq0zsmog2/CSS%20Bug%20Mobile%20Chrome%20on%20Android.png?dl=0</a>
2. Mobile Safari on iPhone: <a href="https://www.dropbox.com/s/urrohpwncerheud/CSS%20Bug%20Mobile%20Safari.png?dl=0">https://www.dropbox.com/s/urrohpwncerheud/CSS%20Bug%20Mobile%20Safari.png?dl=0</a>
3. Desktop Safari Reponsive design mode: <a href="https://www.dropbox.com/s/9vbotpxstut8mwx/CSS%20Bug%20Safari%209%20on%20El%20Cap.png?dl=0">https://www.dropbox.com/s/9vbotpxstut8mwx/CSS%20Bug%20Safari%209%20on%20El%20Cap.png?dl=0</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>