See attachment, this seems to happen on all the breadcrumbs in Elkarte Light on this site.
What browser? O:-)
Tested with:
Chrome 35
Firefox 28 and 29
* IE 11
and works fine.
Someone else had reported seeing those as well but I could not find (nor reproduce) where they were coming from ...
Dat was me, in a PM to you ... or maybe an email. The two, white/grey vertical bars are buggy. You will sometimes see them in the breadcrumbs and sometimes not see them.
I know that I have seen this in IE 11, Fx 28 and PaleMoon 24. I fixed the display in my custom ElkArte theme in the css and have not had a problem since.
ETA: As an example, I saw the vertical white bars while typing this original reply. Saved the reply and came back into add an edit. Now I do not see the vertical white bars on the end of the breadcrumb or the base of the breadcrumb. Tis a bit buggy perhaps?
ETA: If I recall correctly, this was being caused by a border: right and a background color for linktree:hover and linktree_last in the index_light.css file.
Firefox 29, Windows 7x64.
hmm... dunno I have no way to reproduce it, so no way I can find a fix... :-\
Open to suggestions.
I have seen where playing with the hover/background colors will enable me to see or not see, in some cases, the entire vertical bar that is producing that artifact.
So, maybe a bug and maybe not but the overlaying of colors to fill the end of the linktree ( the arrow section ) and the hover effect seem to be leading causes.
Since this is languishing about, here is what causes these artifacts to be an issue. Zooming in or zooming out of the page will cause the short vertical bar to appear at the top and the bottom of the lead link tree. Problem is that these bars do NOT appear at all zoom settings. You might see the bars on the 4th zoom and not on the 5th and then again on the 6th.
The issue is there, no doubt. As long as you keep the screen resolution small, you will not see the artifact. I generally keep the fonts/etc. a bit larger than some so I see the artifacts. Anyone with poor eyesight and using an ElkArte site will likely see the artifacts. I seem to think I fixed this on my theme by removing a vertical right bar. Have not looked in a while so not sure about that.
ETA: I should add that this is also driven in part by the user set Windows text size and screen resolution.
Okay, that help a lot! :D
I can see it at a zoom level of 175 on my computer.
It seems to disappear by tweaking the style of:
.linktree, .linktree_last {in particular changing the padding:
padding: 0 .5em 0 1.5em;
to:
padding: 0 .5em 0 1.3em;
I just pushed the tweak here on the site.
Can you have a look if you see it again and/or if you see any other problem?
Yep, still there. Images are from FF 30. I am afraid I do not know how to determine the zoom percent in FF so no idea what that is for the images.
Notice also that the second from last linktree has the artifacts as green. That is common also. The artifacts will bounce from white to green and at various linktrees. Sort of skippy .... so to speak. :)
@emanuele :: try these changes. They are close to what I did for my theme, only they have been put into the _light variant. I deleted my custom theme so this is from notes. Not sure about all of it though as I believe that an issue is the sharing of code between the two variants. I don't think that I found padding to be an issue but I did find the linktree before and linktree after parts were causing me problems. Screw with the code for the Light variant and the linktree gets goofy looking for the besocial variant. Some of that has to do with the difference in color between the two themes. The below demonstrates my high degree of incompetence.
index.css changes
.linktree a, .linktree em, .linktree_last a, .linktree_last em {
display: inline-block; /* was block, probably does not matter actually but it matches the below display: */
}/* Nifty indicators. */
.linktree:before, .linktree:after, .linktree_last:before, .linktree_last:after {
content: "";
position: absolute;
display: inline-block;
left: 100%;
top: 50%;
margin-top: -1.900em; /* was -1.077em */
margin-left: 2px;
height: 1px;
width: 0;
border: 1.900em solid transparent; /* was -1.077em */
border-right: none;
z-index: 2;
}
index_light.css changes
.linktree:hover:before, .linktree_last:before {
border-left: 0.75em solid #ccc; /* was #3d6e32 */
}.linktree:hover, .linktree_last {
border-top: 1px solid #3d6e32;
/* border-right: 2px solid #3d6e32; */ /* commented out for testing */
border-bottom: 1px solid #3d6e32;
background: #5ba048; /* commented out for testing */
background-image: linear-gradient(to right, #4b863c, #5ba048);
}
Thanks!
Will have a look, at the moment I don't have the code handy.
BTW, do you see it now with the change I did? Just to know if it doesn't work at all. ;)
Sorry :'( still broke. Take a look at the attachments, especially the one named 'hover'. Part of the issue, it seems to me is the right vertical border and hover colors. In this case the hover is on the first linktree, the color is washed out, the border is visible. You can also see that vertical border in both of the non hover links.
The problem with removing that vertical border is that ( as I recall ) it affects the display of the linktree in the besocial variant. This can be mitigated by changing non hover and hover colors, but that is not an option with these two variants. Still, the vertial border and the artifacts are two separate items.
On the other attachments you can see the artifacts at various links.
ETA: correct horizontal to vertical ....
hmm... meh.
I tried the changes suggested, but they only kind of work if the margins in the "/* Nifty indicators. */" block are changed making the arrows more dull. Keeping the margins at 1.077em the arrows all present some kind of artefact.
I tried another thing: most of the sizes are in em, while few are pixels, this may cause problems while zooming because AFAIK one depends on the font size, while the other doesn't.
How do you see them now? (I'm not sure if it is necessary to clean up your browser's cache.)
:) Yep, it is fixed, at least in FF 30. Have not tried IE yet.
I found a backup of my custom theme. I had changed the point, em/px, color and some borders on my linktree so yeah, the pointy thingy on mine is duller. Somewhere in those changes I resolved the artifact issue.
At the risk of tormenting you even more and incurring your wrath, there is still an issue in IE with a vertical border showing. Look at the last link in the attachment.
As far as Light goes, I do not think the border-right is really needed, however they are needed for the besocial variant. I think that I resolved that by doing border-right: none.
Feel free to slap me with some bad Karma if I have led you down the errant path. :)
Well, that's interesting. I think it's the Windows DPI settings that caused the problem, definitely something to consider in the future for accessibility.
The problem seems to be mostly fixed now. The right edge of the final breadcrumb is a bit pixellated still, but there's no white lines.
Darn, I hoped nobody would notice that one! :P
Yeah, I have seen it from time to time, but I can't really find
why it appears... :-\
The border-right seems to be the one that creates the dark part of the point of the arrow.
/me is writing code for that beast, I'm already at the bottom of the pit! :P
You are absolutely correct about that. In the 'factory' Light theme the border-right does that. It also, as I recall, causes that ghost border to show up in IE and sometimes in FF depending on background color and hover color. I sent you a file that shows how I got around that issue. The method I used may seem a bit ugly for your taste but it does work quite well at all zoom levels and there is no border ghosting in IE or FF.
However, everytime I tell you something like that ... you prove me wrong. ;D
I did another tweak to the linktree css here on the forum.
Sometimes it looks better, sometimes it doesn't (I have artefacts in firefox at 110% zoom on some random places (e.g. here at elk.net it appears on the board name, on my localhost it appears on some topic names, it's inconsistent).
Let me know how it is now. ;)
For all intent and purposes I would say it is all good. It worked perfect to the 'blind as a bat' zoom in FF 30 and IE 11. Just as important the linktree behaved the same on zoom in and zoom out. In the past it would get wonky and show artifacts at various links.
The only thing I saw odd was at the last link, where the point meets the top and bottom of the link bar, you will see where the transition is not smooth. Not real noticable at the zoom levels used by most and even when noticed, it does not look out of place. Looks like that is what you intended. :)
From what I have seen, this appears to be fixed. At least on my PC and monitor.
Added yet another tweak that should mask a bit better that one as well. Not 100% perfect, but a bit better.
Small bump, can you please have a look at the who page here http://www.elkarte.net/community/index.php?action=who and tell me if you see anything wrong?
It depends if page is zoomed in or out (1 is regular size, 2 is 110%, 3 is 125%):
Moving this back to a bug. Although I was never able to see the problem, now I do at normal and at the first couple of zoom levels :P
On my local I did a change that in quick testing seems to fix the issue, but then again I was never able to reproduce the problem originally. At the crux of it is (I think) the use of em sizing on the linktree. I moved all of that to PX which holds together until you really zoom in a lot. em sizing does depend on font size and os installed fonts, so it can in some cases get a bit odd and I think using it on those borders is causing it to be flaky in some cases. Of course that could be all BS as well :P
I have the tweaks on http://elkarte.spudsdesign.com/community if anyone that was having the problem could check if that helps at all.
@Spuds , looks fine for me now :)
lol
Back to the future! :P
I moved to em because it seemed to fix some, then at some point I probably moved on more than necessary.
At the moment I see it basically everywhere, but since I'm a minority (Linux+FF-derivative) I didn't consider it a problem.
Up to you guys now!
Which derivative ? I checked in unix (chrome and Fx) and did not see the problem .... good grief lol
ETA: currently I see it on windows 7 with fx at normal plus next two zoom levels, but in chrome its fine until zoom level 3 then I see them (on this site not the test site)
The other alternative is to not play the css game and just use an image (data url), probably save page space as well O:-)
Interestingly odd, with firefox works fine now (last time I have a problem here).
BTW I meant here on this site now, not at spudsdesign with your fixes. ;)
Well beat on the one with the px then, I tried to make the area large so that odd area is hidden by the clipping on the bar, it only may appear on big zooms.
/me waits the px commit. :P
Much better but still a visible vertical bar at %125 and %225 for IE 11.
ETA: Firefox seems to be doing OK as I did not notice any artifacts, etc. in it.
Thanks, I'll take a look and see if there is anything that can be done for that. This is really one of those cute CSS "tricks" that would be better off as an image given how finicky this is being across browsers/OS .. that's an IMO of course.
I've made another tweak for IE (1 px offset plus a z-index to be sure its behind the other triangle) ... See if that takes care of the IE issue on my test site http://elkarte.spudsdesign.com and does not cause an issue with the others :-X
Yeppers ... looks good now. I tried beyond belief zooms with and without hovers and I did not see any issues in IE 11 or FF 28. :)
Cool :D ... thanks for doing some more testing! PR submitted
The linktree sections in the RC1 code were all changed to px values instead of them. This completely broke it on my forum when the linktree expanded to two lines. The arrowish sections on the end extended two lines tall clobbering both lines. Was that change done to fix this?
These cause the two line tall issue.
margin-top: -35px;
border: 35px solid transparent;
Changing it back to 1.077em for each makes them be one line tall again.
LOL ... frickin linktree ! I'll revert it back to em I guess, but the artifacts will probably return.
Yeah it's an annoying mess. The negative margins are also horrible when you get more than one line as the bottom line sits overlapping with the top line. And if you don't do negative margins you end up with odd double borders. And of course then there is the triangle issue.
I fixed it on my forum by setting all the borders to a uniform gray including the highlighted one. Then I could use careful z-indices to overlap things appropriately. I probably could have done it more elegantly though now that I think about it. But this area really does need work.
Yup to all that :D by the time you are done with all the css to make a bland arrow without images, it takes more space than just using the image to start with lol.
I've yet again updated the test site http://elkarte.spudsdesign.com/community/index.php with the height set back to em so when the linktree has to wrap it does not reveal the overflow . Of course the reason I made the triangles big and hid them with the overflow was to hide the edge artifacts, so you get the drill. It has some of the other tweaks still in place so its less artifacty, but its not as good, but may have to do as I'm out of ideas other than use an image.
You can use the unicode right triangle image. You still have to get it to line up right of course. But it at least can be scaled and colored easily.
That would be \25b6
Could you place each linktree element inside another div with overflow-y set to hidden? Would that then still work when it wraps to multiple lines?
I was thinking along the same lines and believe that would work, may give it a whirl
Posting in here to avoid duplicating the conversation.
Couldn't you serve the multi-line fix for mobile, since there pretty much isn't much of a problem with zooming on mobile (most mobile sites don't even allow you to zoom in)? And then serve the artifact fix for desktop?
Unfortunately the line wrap occurs on the desktop which breaks (well changes) the overflow limits (so to speak) ... so I need to find the overflow fix that works on the line wrap for desktop. Should be doable I think, just have not had time to try. Did you get a change to see if the sort-a-fix on the test site (the link posted above) works sort-a-kind-a for you?
The test site seems to be sized oddly. My normal install of Elk shows up as decently-sized on mobile, but the test site looks more like Mobile Curve did. Structure is smaller, but the text is just as tiny as it would look like on desktop view.
This site looks more like my site as well. I'll attach screenshots of the two.
I'm hoping thats something else going on, like some other change not on that site, the linktree should not have changed that (oh please oh please)
So back to this again bwahhhhhh
I completely changed the way the arrows are created, its still all css and no images. The current css is IMO simpler, has less markup, less margin tweaks, less pseudo elements, and does not use borders at all (to generate the effect). OK thats the good part, question is does it work :P
So once again on the old test site http://elkarte.spudsdesign.com/community has been updated with the changes, I did a quick look with a couple of browsers and it seemed to work. So everyone please give that a shot an see how it performs for you.
One note, I know the last item in the linktree does not have an arrow, but its the end so I left if off as that seemed, to me at least, correct, otherwise whats it pointing to? Also I've only updated the light theme, not besocial with this change.
Daww, no arrow. :'(
Hey I said there was none LOL ... So do you want the arrow back on the final crumb, the one that points to nothing :D ... TBH I'm so used to seeing it as wel and part of having it seems logical, but figured what the heck, leave it off for a test.
I like the arrow, it does complete the breadcrumb trail. The flat start looks fine, I think, because it's at the left end of the div. The right end, without the arrow, looks awkward.
Suggestions:
1. Try the arrow.
2. Extend the green background to the end of the div. Maybe the link as well.
3. Gradient fade into the background? Could be cool. Could also look awful and ugly on this theme.
Just for you I added the end arrow back :D ... Now it should be like the old layout just done in a way that I hope will be less prone to those edge artifacts. Once I'm sure of that I look at the other suggestions, but don't want to go to far should it be no better.
The arrow would be the best solution. The others were ideas for less-than-ideal solutions.
Works pretty well here. Slight artifact at the bottom edge of the last arrow but easy to miss if you don't zoom in. I think the back of the first entry should not have a rounded border on the left side though. The curvature doesn't fit the outer box so it looks a bit odd both for single and split lines. But otherwise this looks better than the previous method.
And I like the arrow at the end as well.
It may be just me, though I seem to see the "other" part of the shadow of the arrow (the one backward).
Using:
.linktree:after {
box-shadow: -1px 1px 0 0px rgba(204, 204, 204, 0.9);
}Instead of the original:
.linktree:after {
box-shadow: -1px 1px 0 1px rgba(204, 204, 204, 0.9);
}seems to remove it.
I'm not sure if this breaks other things though... :-[
No thats what it should be (what you posted) ... there is a square on a 45 angle and the shadow provides the edge ... the numbers should match .. 2 2 0 2 or 1 1 0 1 etc ... I was doing to much playing about so who knows what I committed :P
Wait:
Option 1 or option 2?
Because 2 is the one that seems to work here, but you committed the one that matches your pattern (1 1 0 1).
Darn, I hate these css things!!! LOL
Let me guess, your nix box :P
Well 1 1 0 1 should have been fine ... 1 1 0 0 would also be fine but that is going to be very very faint (or should be)
Does 2 2 0 1 work for you?
The first two are the edge offset (like a border width), then the blur (we want it sharp so 0) then the spread (width) which when = < the offset should only be on one side of the "box" lol .... the 2 2 0 1 for sure should cover it.
Checked and apparently it is present in windows as well with Chrome (35).
And is there in Eliana's picture as well:
http://www.elkarte.net/community/index.php?topic=1461.msg10434#msg10434
in the first three.
Ah so it is ... but you have no proof of what was on the test site at that time Bwahhhhhh
OK I do see it in chrome but not Fx ... you know chrome used to be cool :P
1 -1 0 0 and -1 1 0 0 (rtl) are to faint in Fx ... So I'd say 2 -2 0 1 and -2 2 0 1 for rtl for both (unless you want to be browser specific)
LOL
True, so true!
Fine with what you think is good.
I'll revert the other. ;D
Done! :D
https://github.com/emanuele45/Dialogo/commit/3faf1627a0792af05ca718ccbfa67b6cb2488e6a
Just one last question that bothered me since a while: .linktree_last.
Why not .linktree:last-child? O:-)
It should be ... that _last is seems a left over for sure and I think it takes more css ! I'd be glad to give a shot at removing it.
I did a quick replace and seems to work, but I have not yet typed "git commit". O:-)
If you want to give it a try... much better I can blame you in case it doesn't work! :P
Just commit it, there is moar than enough blame to go around on the linktree :P
Here it is:
https://github.com/emanuele45/Dialogo/commit/4b76e2750aa6565147660ed8d297a2bdc3a1fd2f
the original idea was to split in two commits, though in the end there was so many changes I pushed everything into one. :P
I put those changes on the test site as well ... looks good :D
YAY!
I did some css right! :D
Hmmm, there are still border issues with the current setup on this forum. Look at the top border of the last (green) element in this screen cap.
Yeah, not sure its worth fixing TBH ...
That said there is no top border on the linktree, you can add one but then the linktree items will need the negative top margin since the container still has the top border and you don't want to double down on the borders ... could also consider loosing the containers border all together.
At least it looks better than it did when it started. I'd rather take a bigger border than a broken style.
EDIT: Actually, when I look closely, the 'Elk' category crumb has a broken arrow border. :(
Yeah all the arrows have a bit of broken border at the bottom of course the old style did too. It just overfilled it a bit. And the bottom border is doubled. The whole wrapping issue is just a pain. If we set them as table cell style can we use border combining?
Hummmm ...TBH I'm not sure. That thought has also crossed my mind when I typed my response. Never tried it in that configuration so who knows !
If not it might make sense to just simplify that area for the small screens, maybe no border on the container and even drop the faux arrows to save some space?
Then again at this point we have all been looking at them so intensely that we're probably now over critical, there are things that still look a bit worse :P
Yeah I thought adding the styled linktree into mobile instead of the text only version was a big step up even with it having minor artifacts.
Try adding these three lines to the end of the .linktree definition in index.css
box-shadow: 0 -2px 0 -1px #ccc,
3px -2px 0 -1px #ccc,
3px 1px 0 -1px #ccc;
ETA: Three line version that should work with most sizing arrangements of first and second line when it splits to two lines.
Ah, great idea, multiple shadows 8) What you posted looked great in chrome but was a bit rubbed out in Fx on the top ... I updated the test site with the following (and tweaked the position to close the lower right gap on big-ol-zooms)
box-shadow: 2px -2px 0 1px rgba(200, 204, 204, 0.7), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
I like my setup better because yours has lost the top border of the bottom row if it extends past the top row. The corners will always have minor issues. But I'm sure the two can be blended back together.
So the box-shadow you posted fixes that or something else?
The box shadow I posted was to fix the missing top border and help the corners look better. The main thing I started on was fixing the top border.
Ah I had added them to the pseudo element lol, thats why I was confused. FYI on the test site now is the top border with negative margin for a test. I tried border collapse but that only works if we use a display inline-table and doing those two things has a set of other changes that would be needed, so I stopped there.
I still kind of like my version. I've attached blow ups of my version from my test forum (just adding the box shadows to the linktree leave the :after alone and not use negative margins) and your version just captured from the test site. I only have firefox and chrome on linux to look though. The captures are from firefox. Chrome is similar though but the difference is a little more subtle.
Winner Winner, Chicken Dinner . . . I'll make the pr with your box-shadow then.