skip to link text is visible on firefox but not on samsung internet? suggestion on css file also Options

[జిందం వాఐి]

* please find any shortcomings on my css code also
* i have skip link text_ "<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* My Webpage
* css code

CODE

/* Skip link styling */
.text-assistive {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    box-sizing: border-box;
    position: absolute;
    margin: 0;
    padding: 0;
}
.text-assistive.display-at-top-on-focus {
    top: 0;
    left: 0;
    width: 100%;
}
.text-assistive.display-at-top-on-focus:focus {
    -webkit-clip-path: none;
    clip-path: none;
    z-index: 999;
    height: 80px;
    line-height: 80px;
    background: white;
    font-size: 1.2rem;
    text-decoration: none;
    color: #1295e6;
    text-align: center;
}
#skip-link-target:focus {
    background: #084367;
    color: white;
}
/* end of skip link styling */

/* improved keyboard focus visibility */
a:focus {
    border-bottom-color: #1295e6;
}
.menu-right a:focus, .branding a:focus {
    background-color: white;
    color: #1295e6;
}
/* end of improved keyboard focus visibility */


/* basic styles for the rest of the page */
body {
    font-family: sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #F0F0F0;
    color: #000000;
    line-height: 1.5em;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
    margin-bottom: 2em;
}
.bg-dark {
    background: #FFDBFF;
    color: #fff;
    min-height: 100px;
}
.content-width {
    box-sizing: border-box;
    max-width: 1208px;
    padding: 1rem;
    margin: 0 auto;
}
a {
    outline-color: transparent;
    text-decoration: none;
    color: #1295e6;
    border-bottom: 4px solid transparent;
    padding: 2px 1px 0;
}
a:hover {
    border-bottom-color: #1295e6;
    border-bottom: 1px solid;
}
.menu-right a, .branding a {
    color: white;
}
.menu-right a:hover, .branding a:hover {
    background-color: white;
    color: #1295e6;
}
.branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 220px;
    font-size: 2rem;
    font-style: italic;
    height: 68px;
}
.branding a {
    padding: 0 1rem;
}
.flex-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.menu-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 68px;
}


.menu-right a {
    display: flex;
    align-items: center;
    padding: 0 1rem;
}


/* end of basic styles for the rest of the page */

/* start old css */

cite {
    font-style: normal;
}

footer {
    padding: 3px;
    background-color: #F6FEF6;
    color: #0d0c0c;
}

a:link {
    color: #3C6D2C;
}

a:visited {
    color: #ff0000;
}

a:active {
    color: #ec00ff;
}

a:focus {
    border-bottom: 1px solid;
}

/* end of old css */

[pandy]

Hi!

Don't have a Samsung phone, so can't check.

You can find any errors by using the validators.
https://validator.w3.org/nu/
https://jigsaw.w3.org/css-validator/

You have one HTML error, a closing tag for A too many. Here:
https://validator.w3.org/nu/?showsource=yes...s.org%2F#l46c94

[జిందం వాఐి]

Don't have a Samsung phone, so can't check.

* samsung internet is rebranded google chrome.
* if possible, please test it.

[pandy]

Is it the top link? Afraid it's hard for me to read your language. In that case I don't see it either.

[Christian J]

* i have skip link text_ "<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* My Webpage

I can't find

CODE

<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>

or even

CODE

దయచేసి జిందం

in the HTML source of the linked page.

My text editor also has some problems, with the cursor/caret appearing in the wrong position.

[pandy]

Isn't it this? Line 14. But maybe with a different link text. It's at top and #skip-link-target looks promising.

CODE

<a href="#skip-link-target" class="text-assistive display-at-top-on-focus"><span lang="te">ఇటీవలి ఆలోచనలకు వెళ్లండి</span></a>

[Christian J]

Isn't it this? Line 14. But maybe with a different link text. It's at top and #skip-link-target looks promising.

CODE

<a href="#skip-link-target" class="text-assistive display-at-top-on-focus"><span lang="te">ఇటీవలి ఆలోచనలకు వెళ్లండి</span></a>

There's also this on line 40 (plus the link text is different):

CODE

<a href="#skip-link-target" class="text-assistive display-at-top-on-focus" id="skip-link-target"><span lang="te">దయచేసి తారీఖు లెక్కలు అరుసుకొను</span></a>

[Christian J]

When tabbing through the links on the page, a blue box with a white link appears at the top.

Also, when using Ctrl+F in Vivaldi for the strings

CODE

ఇటీవలి ఆలోచనలకు వెళ్లండి

or

CODE

దయచేసి తారీఖు లెక్కలు అరుసుకొను

the browser says there's a match, even though I can't see anything on the page.

[pandy]

Yeah, I get the blue and white thing when tabbing too. Is that it? But the OP said it was visible in other browers.

It's darn confusing when you don't know the alphabet.