We have the following (simplified) HTML:
(The real HTML is a little bit more complicated however the listitem elements are exactly as shown in the snippet below.)
<div role="list">
<div role="listitem">Foo</div>
<div role="listitem">Bar</div>
<div role="listitem">Baz</div>
</div>
As users navigate down the list, VoiceOver announces:
On macOS 10.14 (Mojave):
Foo, groupBar, groupBaz, group
On macOS 10.15 (Catalina):
Foo, empty groupBar, empty groupBaz, empty group
The VoiceOver configuration on both macOS seems to be the same so why does VoiceOver say something different for the same markup? (This GitHub issue seems to describe a similar situation.)
Related
Can't find anything on the topic, no idea if this is something old or new.
Basically, given an input[text] with adjacent div for a label which has any color besides pure black/white -- when selected (and caret is flickering inside) input somehow affects surrounding elements and visually dims them. Like some kind of filter is applied? Like a shadow or a blur or something, but it affects the entire parent' render stack no matter how far elements are from the input distance wise. TLDR: everything visually below the input is affected.
I tried checking computed props on labels and found nothing. CSSOM does not changes for them in any way.
You can try codepen, or any other sandbox.
The code is very simple:
<html style="color: #ffffff; background-color: #1e1e1e">
<head></head>
<body>
<div>
<input type="text" />
<div style="color: #f54562">Error 1</div>
<div style="color: #f54562">Error 2</div>
</div>
</body>
</html>;
I made a gif here:
Moving input into an absolute position helps isolating the effect, but obviously working with inputs like that would be very tiresome.
Checked on 2 different machines.
Reproducible in Chrome: Version 107.0.5304.107 (Official Build) (64-bit);
Edge also;
Works fine in Firefox;
So, some kind of bug or known quirk?
I have a bit of an unusual question, but I'm stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.
Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?
Given that it's still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).
Thanks a lot for any help!!
You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).
The best you can do is to use bootstrap to reach this:
<div class="container">
<div class="col-sm-3">
<!-- Column one, detail list -->
</div>
<div class="col-sm-3">
<!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
<!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
<!-- Column four, third membership option -->
</div>
</div>
you'll get a responsive well designed behaviour:
https://jsfiddle.net/zzhs5w6n/2/
The part that you marked in red are only images.
You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
Then, in the example, you must add responsiveness to this images, check the next complete fiddle:
https://jsfiddle.net/zzhs5w6n/10/
Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.
Hope it helps
I woke up to a wonderful surprise this morning. The flex attribute is no longer working in Chome (working as expected in FF, Safari and IE however).
The following markup:
<span flex="true"></span>
<div layout="column" flex="75" class="layout-column"></div>
typically gets converted to:
<span class="flex" flex="true"></span>
<div layout="column" flex="75" class="layout-column flex-75"></div>
It would appear that the intended behavior converts the flex attribute and property to an associated class. This appears to no longer be working in Chrome. Is anyone else experiencing this issue?
It looks like a new version of Chrome was released last night. I think it may have been a breaking change.
Additional Info:
Angular Material: 1.1.5
Chrome: Version 61.0.3163.100 (Official Build) (64-bit)
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places.
If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: you can see the page at http://bit.ly/ZkZxVG
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.
Edit
Thats not white space, they must be a physical charter in there. This might not be displayed on your screen, but just press delete and backspace until you have the next element in your markup.
white space in HTML is completely ignored by the browser, it does not render it. Looking in Firebug you have "" rendered when editing the item.