Issue 11410

X character on tab close is overflowed in SAO macOS
Nosy list
ced, hodeinavarro
Assigned to

Created on 2022-04-15.03:09:14 by hodeinavarro, last changed 7 months ago by hodeinavarro.


File name Uploaded Type Details hodeinavarro, 2022-04-15.13:45:28 application/zip view
bug-button-close-tryton.png hodeinavarro, 2022-04-15.03:09:14 image/png view


Author: [hidden] (hodeinavarro)
Date: 2022-04-15.13:45:28

I've uploaded a zip containing screen shots of the following bootstrap pages that use the same button.close component: * Alerts v3.3 * Alerts v4.0 * Alerts v5.1

Note: v3.3 and v4.0 use a combination of button+span tags while v5.1 only needs the button tag.

In a first glance upgrading to Bootstrap 5 would solve the issue since the weird spacing at the top of the × would be gone.

But then, there are other dependencies to be taken care of before Bootstrap can be upgraded.

Author: [hidden] (ced) Tryton committer Tryton translator
Date: 2022-04-15.13:06:25

I'm wondering if it is not indeed a bootstrap issue (which may be solved in future versions).

Author: [hidden] (hodeinavarro)
Date: 2022-04-15.12:39:48

Yes, the issue is the same on all those browsers.

I was thinking if it could be about the font or about how macOS renders the ×?

Anyhow, getting or creating a SVG of an 'x' should not be difficult and it would probably be persistent over operating systems. In fact material icons already provides a SVG on a close icon.

If this looks like a good solution for you I'll gladly have a look at it.

Author: [hidden] (ced) Tryton committer Tryton translator
Date: 2022-04-15.08:26:50

You mean that all those browsers render badly on macOS?

Author: [hidden] (hodeinavarro)
Date: 2022-04-15.03:09:14

Title sums it up.

Tested on SAO >6.0

Seems like it's a OS thing, I checked Safari, Microsoft Edge, Chrome, Firefox.

So far the best solution I've come up with is doing a dirty translateY, but that would break the non macOS systems.

Feel free to contact me or nosy list me if you submit a patch with an idea and need to test it.

Date User Action Args
2022-04-15 13:45:28hodeinavarrosetfiles: +
messages: + msg75818
2022-04-15 13:06:25cedsetmessages: + msg75812
2022-04-15 12:39:48hodeinavarrosetmessages: + msg75809
2022-04-15 08:26:50cedsetmessages: + msg75805
nosy: + ced
status: unread -> chatting
2022-04-15 03:09:33hodeinavarrosettitle: X character on tab close is overflowed in SAO -> X character on tab close is overflowed in SAO macOS
2022-04-15 03:09:14hodeinavarrocreate

Showing 10 items. Show all history (warning: this could be VERY long)