Issue 11410

Title
X character on tab close is overflowed in SAO macOS
Priority
bug
Status
chatting
Nosy list
ced, hodeinavarro
Assigned to
Keywords

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

Files

File name Uploaded Type Details
bootstrap-close-button.zip 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

Messages

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.

History
Date User Action Args
2022-04-15 13:45:28hodeinavarrosetfiles: + bootstrap-close-button.zip
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