Bug #71626

Safari: Icons in pagetree are cropped with 1px on bottom

Added by Richard Haeser almost 4 years ago. Updated over 2 years ago.

Status:
Rejected
Priority:
Must have
Assignee:
Category:
Backend User Interface
Target version:
Start date:
2015-11-17
Due date:
% Done:

50%

TYPO3 Version:
8
PHP Version:
Tags:
Complexity:
Is Regression:
No
Sprint Focus:

Description

In the backend of a 7.6 installation, all icons in the pagetree are cropped with 1px on the bottom. This problem only occurs in Safari. Other browsers don't have this problem. Also in =< 7.5 there is no problem.

Screen Shot 2015-11-17 at 13.50.06.png View - Screenshot of pagetree in Safari (16.1 KB) Richard Haeser, 2015-11-17 14:13

Screen Shot 2015-11-17 at 14.31.25.png View - Safari (4.38 KB) Richard Haeser, 2015-11-17 14:34

Screen Shot 2015-11-17 at 14.31.55.png View - Firefox (4.36 KB) Richard Haeser, 2015-11-17 14:34

Safari_line-height-20.png View (48.9 KB) Frank Naegler, 2016-06-13 15:23

Schermata 2016-06-13 alle 15.34.40.png View (68.8 KB) Riccardo De Contardi, 2016-06-13 15:37

TYPO3_8_6_0-dev.png View (61.3 KB) Frank Naegler, 2017-02-10 12:12

History

#1 Updated by Richard Haeser almost 4 years ago

It seems the problem only occurs on an external (non-retina) screen attached to a retina-device.

#2 Updated by Richard Haeser almost 4 years ago

It is not only on the page-tree icons, but also on other icons.

#4 Updated by Riccardo De Contardi over 3 years ago

  • Target version set to Candidate for patchlevel

#5 Updated by Riccardo De Contardi over 3 years ago

  • Category set to Backend User Interface

#6 Updated by Riccardo De Contardi over 3 years ago

the problem is still present in latest master (8.1-dev)

#7 Updated by Frank Naegler about 3 years ago

  • Status changed from New to Accepted
  • Assignee set to Frank Naegler

#8 Updated by Frank Naegler about 3 years ago

The bug occurs only on Mac with retina displays and a second external (non retina) Monitor.
On the retina screen all is fine, on the external monitor the one pixel crop happens.

I figured out, that setting the line-height of .icon-size-small to 20px fix the problem.
Fixing this in general scope will force broken icons in other context like the Toolbar (Top-Menu-Bar).

Safari with line-height: 20px; for .icon-size-small

#9 Updated by Riccardo De Contardi about 3 years ago

Safari 9.1.1 (11601.6.17) on 15' MACBOOK pro (2011, no retina display, 1440x900) - see attached file

#10 Updated by Dennis L├╝mkemann over 2 years ago

I can confirm this bug on Safari 9.1.3 on a MacBook Pro 15" 2010 (no retina, no external displays)! Other editors affected on an iMac/Safari 9.

#11 Updated by Josef Glatz over 2 years ago

  • Priority changed from Should have to Must have
  • Target version changed from Candidate for patchlevel to 8 LTS
  • TYPO3 Version changed from 7 to 8

The bug is still valid on 8.6.0-dev (master)

#12 Updated by Josef Glatz over 2 years ago

  • Subject changed from Icons in pagetree are cropped with 1px on bottom to Safari: Icons in pagetree are cropped with 1px on bottom

#13 Updated by Frank Naegler over 2 years ago

  • Assignee changed from Frank Naegler to Josef Glatz

#14 Updated by Josef Glatz over 2 years ago

  • Status changed from Accepted to Needs Feedback
  • % Done changed from 0 to 50

Looks like a bug in Safari stable, which I could reproduce in the Technology Preview Versions available in (El Capitan and Sierra)

After some research and CSS fixing the problem seems to be an upstream problem in Safari itself:

In latest stable Safari (El Capitan & Sierra) most of the .icon {} are cropped at the bottom.

The problems didn't occur with the following browsers tested on external displays (Eizo CG241W, 94ppi; Dell U2412M; Samsung SyncMaster; built in Retina-Displays Macbook Retina, Macbook Pro Retina):
  • Safari Technology Preview Release 16 (Safari 10.1, WebKit 11603.1.10) on a MBP 13" Retina, Early 2015
  • Safari Technology Preview Release 23 (Safari 10.2, WebKit 12604.1.5) on a MB 12" Retina

My Conclusion

I tried to fix the problem within the CSS with several ways. But I didn't find a generic or nice crossbrowser compatible "solution". I would say to wait until the responsible fix get's into Safari "stable" versions or completely remove Safari from our supported browsers list (just a bad joke). I also couldn't reproduce the 0,5px crop on retina displays always. Just in some cases, I get the crop on retina with (~0,5px). One more reason why it seems to be an upstream problem.

#15 Updated by Frank Naegler over 2 years ago

  • File typo3_8_6_0-dev_480.png added
  • Status changed from Needs Feedback to Rejected

this issue is an upstream bug in safari, will close this issue.

#16 Updated by Frank Naegler over 2 years ago

  • File deleted (typo3_8_6_0-dev_480.png)

Also available in: Atom PDF