document.elementFromPoint returning different elements for same input

2022-01-25 05:53 peter duffy imported from Stackoverflow

I am using document.elementFromPoint to figure out what svg shape is at a certain point. I was experimenting with elementFromPoint on this image when I noticed that I was getting different outputs for the same input.

Here is exactly what I did for reproducibility.

I cut and pasted the svg tag from the linked svg and inserted it into the body of an html file. The html file was set up using the single ! emmet shortcut in vscode. Nothing else was in the body. The only css was body{margin:0;}.
In chrome I went around calling elementFromPoint. Mostly at .25,50 but sometimes just a little to the right or a little to the left. Sometimes calling with the same arguments over and over again to see if it would change.
There was no scrolling done during this time. There wasn't even an option as there was no scroll bar present.

My question is why does this happen? Is there a pattern to it? Is there a way to prevent it? Thanks.

1 answer

answered 2022-01-25 16:29 ccprog
While I can't tell you why this happens, or how to prevent it, the "pattern", or let's better say the reason for the inconsistent behavior can be narrowed down.

Let's look at the paths that are returned by your calls to elementFromPoint. There are two of them, and if you leave out the ids and classes, both look identical, even taking into consideration their parent elements:
```
<g transform="translate(-1.775,-1.575)">
    <path d="M 1.9,551.3 V 1.7 H 1102 V 551.3 H 2.3" />
</g>
```
If you rewrite the path such that the transform is resolved, you get a path in (browser) viewport coordinates - for clarity, I have rewritten the V and H commands as L:
```
<path d="M 0.125,549.725 L 0.125,0.125 L 1100.125,0.125 L 1100.125,549.725 L 0.525,549.725" />
```
The SVG contains a stylesheet that describes the filling and stroking of these elements. This is the relevant excerpt:
```
.seabase {
  fill: #C6ECFF;
  stroke: none;
}
.mapborder {
  fill: none;
  stroke: #0978AB;
}
path, circle {
  stroke-width: 0.25;
}
```
So what should be returned from document.elementFromPoint(0.25,50)? The topmost element to be found at the given coordinates, provided the pointer-events property allows the element to be the target of a hit-test.

pointer-events is not explicitely set for the elements, so the default value of visiblePainted applies. This means that an (at least partially) opaque fill or stroke both can be hit.

The bottom element of the two candidates, <path class="seabase"/>, has a visible fill, but no border. Point (0.25,50) is inside that fill.

The topmost element of the two candidates, <path class="mapborder"/>, has no fill but a visible border of width 0.25, extending half to the inside and half to the outside of the path outline. At the left side, there is a vertical subpath M 0.125,549.725 L 0.125,0.125. Not going into the details of corners, the stroke could be drawn equivalently as a filled path with a definition
```
M 0,549.725 L 0,0.125 L 0.25,0.125 L 0.25,549.725 Z
```
In other words, the point (0.25,50) is exactly on the outline of the stroke. The spec is quite clear about the consequences:

The zero-width geometric outline of a shape is included in the area to be painted.

The point should hit the mapborder element, as the point is part of its visible, painted stroke. If, as you describe, the browser sometimes returns the seabase element, it is in error.

I could go on and speculate about the reasons for this behavior, but that is moot, I think.

Can you prevent it? Only if you would be able to consistently avoid the exact outline of all paths, or if they have a stroke, the outline of that stroke. That's hardly practical, since you would have to find out if the browser missed something it should have hit, while you don't know what was missed.

Finally, there is a second interface that can be used. It is part of the SVG specification, while elementFromPoint is part of the CSSOM spec. Whether that makes a difference in the browser implementation, I cannot say.
```
document.querySelector('.seabase').isPointInFill(new DOMPoint(2.025,48.425));
document.querySelector('.mapborder').isPointInStroke(new DOMPoint(2.025,48.425));
```
Note that you need to provide an element to test against, that you get no information which element is on top, and that the coordinates are expressed in local userspace (before transform is applied).

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
Just 1 icon out of several from my sprite will not show up
Hey guys fairly new to coding so forgive me. I took logos and made a sprite and inserted into my header. Everything works fine except the #chevron, it is the only one not showing up. If I use #quotes instead, the quotes icon shows up fine. I'm assuming it's a file issue but I checked the file and its fine.

Solutions I've tried;
- Remaking the sprite file etc
- Checking the original chevron.svg file (Its completely fine)

Send SVG image content to email as HTML using boto3

I want to send SVG content (without saved file) as HTML to Outlook email address. This SVG content works fine in browser showing a circle image, however sending it via boto3.client to Outlook email results in empty mail. Why? Any suggestions appreciated.

import io
import json
import boto3
from botocore.exceptions import ClientError

SENDER = "Name1 LastName1 <Name1.LastName1@mail.com>"
RECIPIENT = "Name2 LastName2 <Name2.LastName2@mail.com>"
AWS_REGION = "us-east-1"
SUBJECT = "something"

svg = """
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> 
"""

BODY_HTML = f"""<html>
<body>
{svg}
</body>
</html>
            """ 

CHARSET = "UTF-8"

client = boto3.client('ses',region_name=AWS_REGION)

try:
    response = client.send_email(
        Destination={
            'ToAddresses': [
                RECIPIENT
            ],
        },
        Message={
            'Body': {
                'Html': {
                    'Charset': CHARSET,
                    'Data': BODY_HTML
                }
            },
            'Subject': {
                'Charset': CHARSET,
                'Data': SUBJECT
            },
        },
        Source=SENDER
    )   
except ClientError as e:
    print(e.response['Error']['Message'])
else:
    print("Email sent! Message ID:"),
    print(response['MessageId'])

How do I use an animated SVG for navbar link hover, and position it properly?

I’m building my portfolio and it has a theme as if it's been drawn on paper.

When you hover over a link on my navbar, the SVG animates from underneath, it's an arrow that points to the link and it looks like it's been drawn with a sharpie. I would also like to animation to reverse on mouse out, instead of just disappearing.

The animation works awesomely on hover (by itself), exactly as I want, however I cannot figure out how to make it appear on a navbar link hover instead. Also, I'm unsure how to position it. Currently I have the SVG placed after my <a> tags.

Here's the code:

div {
  border: 1px black solid;
  width: 120px;
  height: 150px;
  text-align: center;
}

#arrowSVG:hover path {
  animation: nav_arrow 800ms linear 1 normal forwards;
}

@keyframes nav_arrow {
  0%,
  100% {
    stroke-dashoffset: 228.816432;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div>
  <p> Hover me!
    </>
    <svg id="arrowSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
      <path id="eZuEQXWsHpA2" d="M81.33906,95.61239c-2.04913-2.92733-15.33188-23.55344-18.27718-23.9216-2.1176-.2647-6.39806,6.74064-9.13859,
                      5.64442-1.72253-.68901-.23957-19.37568,1.07513-20.42744.35406-.28324,17.10175,10.91579,16.93327,12.09519-.24773,1.73411-10.42713,
                      4.21185-12.09519,4.56929-2.16723.46441-8.43321,2.60391-6.45077,1.61269c3.20375-1.60188,6.85172-2.25839,9.67615-4.56929.39226-.32094,
                      1.55594-1.2354,1.07513-1.07513-.88133.29378-11.28885,4.35372-11.28885,4.30051c0-2.22645,10.47757-5.91321,12.36397-5.91321c1.02153,
                      0-1.18114-1.93573-2.15025-1.61269-2.93453.97818-11.8009,6.50634-9.94494,4.03173c2.11065-2.81419,10.07996-2.15151,11.02006-4.03173.26335-.5267-10.04599,
                      1.11958-10.4825.53757-2.04355-2.72474,8.60103-2.59902,8.60103-3.76295c0-1.26705-8.19827,1.07445-8.86981,0-.76572-1.22515,1.75021-2.86552,
                      2.15026-3.49417.30422-.47805.18968-1.16541.53756-1.61269c1.16554-1.49856,2.42055,6.98982,3.76296,8.33224c4.42514,4.42514,10.96031-4.00183,9.40736,3.76295" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="228.816432" stroke-dasharray="228.816432" />
</div>

How to prevent content from hiding under the iOS Safari UI

I'm trying to create a single page application for the web and so far it's been going well. Unfortunately, when testing it on an iPhone I realized that part of my website's contents are hidden underneath the navigation bar of the browser (Safari). Normally, when scrolling down on a website that UI element disappears and makes way for the content under it to show properly and use the screen space efficiently, but since my site has scrolling disabled (since I'm trying to make a single screen UI) part of it ends down there.

I've noticed this only affects Safari, and my app works perfectly on other browsers, even on mobile.

So far, to solve this issue I've tried to use environment variables on CSS like this: height: calc(100vh - env(safe-area-inset-bottom))

But it didn't seem to make any difference. So what I'm asking for is: is there any way to prevent this from happening, perhaps loading the website on fullscreen already hiding the browser's UI?

For context, here is the problem:

Current state:

The part of the page that gets hidden (enabled scrolling):

Desired result:

(Also, I've noticed that a Wordle clone I regularly play (term.ooo) has managed to pull off what I wanted to do, so there's got to be a way but I haven't figured it out by analyzing their CSS '-')
Cover-Template: Page Title and Scroll Indicator below visible area (viewport)

Now that I’ve mostly got everything on my website (WordPress, Theme: Twenty Twenty) right the way I want it to be, there is still a problem for which I can’t find a solution. I have activated the “Cover-Template” on all pages. Everything looks as it should on the desktop computer. Not on the mobile phone, however, at least not in Safari and Chrome. I solved the problem that the background image or the cover template is too wide on the side and is not automatically adjusted with “width: 100dvw” and “height: 100dvh”. Unfortunately, however, the “entry-title” and the “scroll indicator” is still not displayed in the “viewport”, but below the visible area. With two-line titles you can at least see a little of the upper part, with one-line titles nothing at all. In Firefox and Edge everything works… the image is fully displayed, as well as the title and the arrow. What can I do here?

I would be very happy about a solution! Thanks in advance.

The page I need help with: admin4you.net

How can I properly time animations in CSS?

I planned on building a website and I don't seem to find any way to time the animations. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image {
        animation-name: appear;
        animation-duration: 5s;
      }
      
      .extremebig {
        font-size: 200px;
      }
      
      @keyframes appear {
        0% {opacity: 0;}
        100% {opacity: 1.0;}
      }
    </style>
  </head>
  <body>
    <p class="extremebig">hello!</p>
    <img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
  </body>
</html>

My idea of timing it is that the apple only starts appearing when it is visible to the visitor of the website. Do you guys have any idea?

.Net Web API - 404 not found in postman

Hello Dearest Community,

I am getting a 404 not found on a custom route of my Web API. I am using .Net Core Web API setup. This is my controller :

namespace CRUD_App.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmployeeController : Controller
    {
        private readonly IConfiguration _configuration;
        private readonly IWebHostEnvironment _env;

        public EmployeeController(IConfiguration configuration, IWebHostEnvironment env)
        {
            this._configuration = configuration;
            this._env = env;
        }


        [HttpGet]
        public IActionResult Get()
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var dbList = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable();

            return Json(dbList);
        }

        [HttpPost]

        public IActionResult Post(Employee emp)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            int LastEmployeeId = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").AsQueryable().Count();

            emp.EmployeeId = LastEmployeeId + 1;

            dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").InsertOne(emp);

            return Json("Employee Added Successfully");
        }

        [HttpPut]
        public IActionResult Put(Employee emp)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var filter = Builders<Employee>.Filter.Eq("EmployeeId", emp.EmployeeId);

            var update = Builders<Employee>.Update.Set("EmployeeName", emp.EmployeeName)
                                                  .Set("Department", emp.Department)
                                                  .Set("DateOfJoining", emp.DateOfJoining)
                                                  .Set("PhotoFileName", emp.PhotoFileName);

            dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").UpdateOne(filter, update);

            return Json("Employee Updated Successfully");

        }

        [HttpDelete]
        public IActionResult Delete(int id)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var filter = Builders<Employee>.Filter.Eq("EmployeeId", id);

            dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").DeleteOne(filter);

            return Json("Employee Deleted Successfully");
        }

        [Route("GetById")]
        [HttpGet]
        public JsonResult GetById(int id)
        {
            MongoClient dbClient = new MongoClient(_configuration.GetConnectionString("EmployeeAppCon"));

            var filter = Builders<Employee>.Filter.Eq("EmployeeId", id);

            var emp = dbClient.GetDatabase("BDD").GetCollection<Employee>("Employee").Find(filter);

            return new JsonResult(emp);
        }
    }

The route that is causing the problem is the last one above meaning the one with [Route("GetById")].

Here is the screenshot of the result on postman :

Than you for your time !

sqllite 19: foreign key constraint faild in TDD Test in Asp.net webapi

I Test Add Goods in Project when debugging below inner Exception SqlliteException :SqlLite error 19: foreign key constraintfailed Note:my project it's a small shop with implementing WebApi then test with swagger or postman All Operation with successful and in BDD With SqlServer But TDD with InMemory can't passed them.

public class Goods : EntityBase
    {
        public string Name { get; set; }
        public int Count { get; set; }
        public int MinimumInventory { get; set; }
        public int SalesPrice { get; set; }
        public string UniqueCode { get; set; }

        public int EntryDocumentId { get; set; }
        public EntryDocument EntryDocuments { get; set; }

        public int SalesInvoiceId { get; set; }
        public SalesInvoice SalesInvoices { get; set; }

        public int CategoryId { get; set; }
        public Category Category { get; set; }

    }




public class Category :EntityBase
    {
        public Category()
        {
            Goods = new HashSet<Goods>();
        }
        
        public string Name { get; set; }

        public HashSet<Goods> Goods { get; set; }

    }

it's my tdd test

[Fact]
        public void Add_adds_Goods_Properly()
        {
            _category = new Category
            {
                Name = "DummyCategory"
            };
            _context.Manipulate(_ => _.Categories.Add(_category));

            _addGoodsDto = new AddGoodsDto
            {
                Name = "ماست کاله",
                SalesPrice = 5000,
                MinimumInventory = 5,
                Count = 10,
                UniqueCode = "YK-142",
                CategoryId = _category.Id,
                
            };
         _sut.Add(_addGoodsDto);

            var expected = _context.Goods.FirstOrDefault();

            expected.Name.Should().Be(_addGoodsDto.Name);
            expected.SalesPrice.Should().Be(_addGoodsDto.SalesPrice);
            expected.MinimumInventory.Should().Be(_addGoodsDto.MinimumInventory);
            expected.Count.Should().Be(_addGoodsDto.Count);
            expected.UniqueCode.Should().Be(_addGoodsDto.UniqueCode);
            expected.Category.Id.Should().Be(_category.Id);
        }

Controller Method Get : Get specify attributes from a Class

my question is simple, I´m try to do a controller that pass some attributes of a Model

This is the method:

[HttpGet("getAllUserInfo")]
public async Task<ActionResult<object>> GetAll() {
    var test = await _context.Users.ToListAsync(); //here I have the all Info of all users

    //In the return I want pass some attributes of user, creating a new object (ex: The user have a password but I don´t want to show that)
    return Ok(new { test.getType().Name, test.getType().Mail });
    //this above is the part of the code I don´t understand
    }

Is there any alternative to this scenario or what are the possible ideas to make this possible?

Sorry if there are any spelling mistakes in the title and document, but I think the idea where I have difficulty understanding is there

Related questions

document.elementFromPoint returning different elements for same input

1 answer

See also questions close to this topic

Current state:

The part of the page that gets hidden (enabled scrolling):

Desired result: