Bug 27566 - CSS rule not applying to HTML select / option - displays with serif font ignoring rules
Summary: CSS rule not applying to HTML select / option - displays with serif font ign...
Status: Pushed to stable
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-01-28 10:05 UTC by RR
Modified: 2021-05-24 18:21 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Text to go in the release notes:
Version(s) released in:
21.05.00,20.11.06


Attachments
Bug 27566: Add generic font family to prevent unstyled select tags (1.90 KB, patch)
2021-01-28 16:43 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot of OPAC dropdown in Firefox on macOS (135.18 KB, image/png)
2021-03-17 12:09 UTC, Owen Leonard
Details
Bug 27566: Add generic font family to prevent unstyled select tags (1.96 KB, patch)
2021-03-21 13:42 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 27566: Add generic font family to prevent unstyled select tags (2.01 KB, patch)
2021-03-22 13:02 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags (2.64 KB, patch)
2021-04-08 12:35 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags (2.69 KB, patch)
2021-04-14 11:40 UTC, David Nind
Details | Diff | Splinter Review
Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags (2.74 KB, patch)
2021-04-22 21:46 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description RR 2021-01-28 10:05:59 UTC
System uses NotoSans to render content, the font file loads correctly (see it in the network while using inspector). The HTML select displays with serif fonts.The CSS rules applied to select and option is font-family: NotoSans. 

In this instance i think there should be a fallback like font-family: NotoSans, sans-serif.
Comment 1 Owen Leonard 2021-01-28 16:43:53 UTC
Created attachment 115975 [details] [review]
Bug 27566: Add generic font family to prevent unstyled select tags

This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:

font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Open the OPAC main page in Firefox.
 - Click the search type dropdown. The options should be styled using
   your system's default sans-serif font rather than a serif font.
Comment 2 Henry Bolshaw 2021-03-17 11:47:16 UTC
I can't replicate this bug on Firefox 86 or Firefox 78.8.0esr (desktop Linux) or Firefox for Android. 

Please would you provide more information about how to reproduce the error or provide a screenshot of where the serif font appears.
Comment 3 Owen Leonard 2021-03-17 12:09:05 UTC
Created attachment 118369 [details]
Screenshot of OPAC dropdown in Firefox on macOS
Comment 4 Henry Bolshaw 2021-03-17 12:28:48 UTC
Thanks Owen! I'm seeing something different in my browser so I don't think I can test this patch unfortunately.
Comment 5 RR 2021-03-17 12:32:59 UTC
Hya, i'm on ubuntu, also couldn't get the bug on firefox or chrome.
I think that you'd get the bug visible on gnome web, which is "a sort" of safari.
Regards
Comment 6 RR 2021-03-17 12:41:55 UTC
Sorry guys actually looks like you can't replicate using gnome web
Comment 7 Katrin Fischer 2021-03-21 13:25:26 UTC
For what it's worth, we are seeing this bug with Firefox ESR in Windows. 
Sadly, I can't test this myself either, but I'll try and see if I can find some other combination that shows the error outside windows.
Comment 8 Katrin Fischer 2021-03-21 13:42:34 UTC
Created attachment 118568 [details] [review]
Bug 27566: Add generic font family to prevent unstyled select tags

This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:

font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Open the OPAC main page in Firefox.
 - Click the search type dropdown. The options should be styled using
   your system's default sans-serif font rather than a serif font.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 9 Katrin Fischer 2021-03-21 13:43:59 UTC
This patch won't hurt anything - changes are standard CSS and will be ok, I checked for regressions in a few browsers. I hope to do another check from Windows, but really happy if someone beats me to it.
Comment 10 PTFS Europe Sandboxes 2021-03-22 13:02:35 UTC
Created attachment 118591 [details] [review]
Bug 27566: Add generic font family to prevent unstyled select tags

This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:

font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Open the OPAC main page in Firefox.
 - Click the search type dropdown. The options should be styled using
   your system's default sans-serif font rather than a serif font.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Comment 11 Katrin Fischer 2021-03-22 13:04:39 UTC
Thx Henry!

Counting my Sign off for QA in this case :)
Comment 12 Henry Bolshaw 2021-03-22 13:12:56 UTC
I'd forgotten I could test this via the sandboxes! I can confirm that the serif font was appearing when using Firefox on Windows and that this patch fixes the issue. I didn't notice any other visual changes when the patch was applied.
Comment 13 Katrin Fischer 2021-03-22 13:26:34 UTC
(In reply to Henry Bolshaw from comment #12)
> I'd forgotten I could test this via the sandboxes! I can confirm that the
> serif font was appearing when using Firefox on Windows and that this patch
> fixes the issue. I didn't notice any other visual changes when the patch was
> applied.

Same here :) Totally forgot I could use the sandboxes from my Windows environment yesterday.
Comment 14 Jonathan Druart 2021-04-01 16:54:02 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 15 Owen Leonard 2021-04-07 13:43:13 UTC
This patch was very wrong, and I'm sorry I made it. It breaks the expected custom font-loading completely.

I have what I think is a correct patch. It could be added as a follow-up or the original could be reverted. There is no part of the original patch which is correct.
Comment 16 Henry Bolshaw 2021-04-07 14:00:48 UTC
Now you tell us! :O
Comment 17 Owen Leonard 2021-04-08 12:35:57 UTC
Created attachment 119322 [details] [review]
Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags

This correction fixes the previous patch which was dumb and stupid.

This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:

font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Open the OPAC main page in Firefox.
 - Click the search type dropdown. The options should be styled using
   your system's default sans-serif font rather than a serif font.
 - Check that other areas of the OPAC are still styled with the correct
   "NotoSans" font. An error with this patch should be obvious when
   looking at a logged-in user's checkouts.
Comment 18 Fridolin Somers 2021-04-13 14:58:41 UTC
Oh I wait for backport then.

We may revert from master.
Comment 19 David Nind 2021-04-14 11:40:50 UTC
Created attachment 119560 [details] [review]
Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags

This correction fixes the previous patch which was dumb and stupid.

This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:

font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Open the OPAC main page in Firefox.
 - Click the search type dropdown. The options should be styled using
   your system's default sans-serif font rather than a serif font.
 - Check that other areas of the OPAC are still styled with the correct
   "NotoSans" font. An error with this patch should be obvious when
   looking at a logged-in user's checkouts.

Signed-off-by: David Nind <david@davidnind.com>
Comment 20 David Nind 2021-04-14 11:44:39 UTC
Testing notes:
- Tested on Ubuntu 18.04 with Firefox 87 64-bit and Firefox Developer Edition 88.0b9 64-bit
- Didn't notice any change with the drop down list - was the NotoSans or a sans-serif font
- I did notice on the checkouts summary page - some text was a serif font including the title: applying the patch and updating the CSS fixed it!
Comment 21 Katrin Fischer 2021-04-22 21:46:17 UTC
Created attachment 120031 [details] [review]
Bug 27566: (follow-up) Add generic font family to prevent unstyled select tags

This correction fixes the previous patch which was dumb and stupid.

This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:

font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Open the OPAC main page in Firefox.
 - Click the search type dropdown. The options should be styled using
   your system's default sans-serif font rather than a serif font.
 - Check that other areas of the OPAC are still styled with the correct
   "NotoSans" font. An error with this patch should be obvious when
   looking at a logged-in user's checkouts.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 22 Katrin Fischer 2021-04-22 21:47:00 UTC
This also fixes the item type descriptions on the advanced search that had suddenly started to show in serif font for me :)
Comment 23 Jonathan Druart 2021-04-23 09:55:20 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 24 Fridolin Somers 2021-04-29 15:23:35 UTC
Pushed to 20.11.x for 20.11.06
Comment 25 Andrew Fuerste-Henry 2021-05-24 18:21:42 UTC
Doesn't apply cleanly to 20.05, please rebase if needed. Thanks!