So I'm having a strange issue where all my spans that are display : inline
just don't appear on safari even when I use the browser's console and hover the element in the DOM to get the preview of its dimension nothing appears and the box Model shows this
Whereas firefox or chrome shows the correct dimensions
If I change the span display to inline-block
everything appears as it should but I canno't use such css rule in this specific case because the word break won't work anymore, I'm using a span for each letter of my banner title to animate it with js + css so I need it to be display : inline
Here's the result with display : inline
on firefox/chrome
And here with inline-block
on firefox/chrome/safari
So as you can see using inline-block
is not an option.
Also I checked my entire website for spans and none of them appear on safari unless I add display : inline-block
so it's not specific to my banner title. The only common css to all my spans is this one
span {
font-weight : 500;
line-height : 3rem;
/* 1rem = 10px in this case */
}
Apart from these two css rules most of them are just plain spans with sometimes font-size
or color
changes.
Edit :
To better show what I mean this is what happens when I hover my h1 element using Safari's dev tools
And here when I hover any span inside that h1 while it's using display : inline
And finally when I hover a span inside my h1 while using display : inline-block
Edit 2 : After hours of search it seems like the problem comes from the font itself, when I use another one Safari shows my spans elements, still no idea on how to fix that but in case it might point someone in the right direction in the future I'm leaving this note
如果它可以帮助面临同样问题的人,我终于找到了问题,它直接来自字体文件,我再次将它们上传到我的服务器并且它起作用了
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.