Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Grid lines thick and a bit obtrusive with 1.8.0 #638

Closed
drgrice1 opened this issue Apr 11, 2024 · 5 comments
Closed

Grid lines thick and a bit obtrusive with 1.8.0 #638

drgrice1 opened this issue Apr 11, 2024 · 5 comments

Comments

@drgrice1
Copy link

With the changes to the grid in version 1.8.0, the grid lines have become considerably thicker than before, and are rather obtrusive. Aside from the lack of visual appeal, the grid can obscure other elements, primarily text labels on the axis. I noticed that if I zoom in with the browser (Ctrl-+), the grid lines suddenly go back to looking thin like they did before with previous versions of jsxgraph. Am I missing a new setting that can fix this? I tried many combinations of the new themes and other settings, and nothing helped.

Here are some screenshots demonstrating the difference. These were taken with Firefox, but I see the same behavior in Google Chrome.

The first screenshot is with 1.8.0 at the default zoom level:
grid-1 8 0

The next is with 1.8.0 at a zoom of 120%:
grid-zoomed-1 8 0

The next is with 1.7.0 at the default zoom level:
grid-1 7 0

Finally, with 1.7.0 at 120% zoom:
grid-zoomed-1 7 0

Here is the minimal code used for these (of course the version changed for the 1.7.0 screenshots):

<html>
	<head>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraph.css" />
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.js"></script>
		<style>
			#box {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>

	<body>
		<div id="box" class="jxgbox"></div>
		<script>
			JXG.JSXGraph.initBoard('box', {
				boundingBox: [-10, 10, 10, -10],
				axis: false,
				grid: { majorStep: [1, 1] }
			});
		</script>
	</body>
</html>
@alfredwassermann
Copy link
Member

This is very strange. First, I can not reproduce it on my computer (also with Firefox). Second, in 1.8.0, out of the box we use exactly the same color, opacity and stroke width as in 1.7.0.
Could you set up a jsfiddle, so that more people can test it? Which OS and screen resolution did you use? It might also be some ant-aliasing thing.

@alfredwassermann
Copy link
Member

Update: now, I can reproduce it. On my computer the problems starts with zoom level $\leq$ 80. Indeed, it looks like an anti-aliasing problem. We will work on it.

@drgrice1
Copy link
Author

Interesting. So it just happens that with my settings it happens one zoom level higher than for most others. That explains why there were no issues on this.

It does seem like an anti-aliasing issue.

I am not sure if this is still needed, but here is a jsfiddle: https://jsfiddle.net/drgrice1/1fL45apq/4/

Thanks for looking into this.

@alfredwassermann
Copy link
Member

Ok, fixed in the sources (branch develop)

@drgrice1
Copy link
Author

I can confirm that the issue is fixed with the develop branch. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alfredwassermann @drgrice1