Blurry text in Safari

[maxkfranz]

Safari Version 11.0.3 (12604.5.6.1.1)
Mac Version 10.12.6 (16G1212)

It also affects the iPhone with Safari: iOS 11.2.5 (15D60)

When zoomed in, the text can become blurry in Safari. See this example:

[surfjedi]

+1 yup seeing this after I made some really cool html labels with dropdowns an every thing.. @maxkfranz any ideas what this could be?

in screen shot red is cytoscape node in red (which is crisp) yet the custom html is all blurry...

[surfjedi]

@kaluginserg Any ideas what this issue is? I love your plugin and may be able to help just don't know where to start?

[thearod5]

Similarly love this plugin and would love to help in any way I can!

[leecalcote]

Ditto. Will you accept a PR on this, @kaluginserg?

[leecalcote]

Has anyone found a solution to this issue, yet?

[anthologen]

I did some investigation and the issue appears to be related to the way Safari (mis)handles z-index. Once you remove the z-index style attribute, Safari stops blurring the labels.

For a reproducible example:

1. Open the repo's public demo in Safari (or the index.html in the project root)
2. In the DOM inspector, find the parent div of all labels divs (with class “cy-title”)
3. From that div, delete the z-index style attribute
4. Observe that the labels are no longer blurred

Unfortunately, removing z-index puts all labels beneath the other elements in the cytoscape container which is undesirable. That problem becomes very visible when drawing a graph with thick edges or when trying to overlay labels on top of nodes.

My experiments to work-around it using translate3d haven’t been working. I might return to this, but I’m hoping someone else finds these notes useful.